<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
import echartsLiquidfill from 'echarts-liquidfill'

export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    unit: {
      type: String,
      default: ''
    },
    ecdata: ''
  },
  data() {
    return {
      // color: ["#0050E2", "#FF5227", "#FF9200", "#0780ED", "#00AFC3", "#00FFAA"],
      chart: {}
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {
        series: [{
          type: 'liquidFill',
          data: [{
            name: 'data name',
            value: that.ecdata / 10 / 10}, (that.ecdata - 0.1) / 10 / 10, (that.ecdata - 0.2) / 10 / 10,],
          // data: [60, 50, 40, 3/0],
          radius: '90%',
          // 水球颜色
          color: that.bg_color(that.ecdata),
          center: ['50%', '52%'],
          // outline  外边
          outline: {
            show: false,
          },
          itemStyle: {
            // opacity:0.5,//波浪的透明度
            shadowBlur: 0,//波浪的阴影范围
            // shadowColor:'#f60'//阴影颜色
          },
          amplitude: 5,
          // label: {
          //   normal: {
          //     textStyle: {
          //       color: 'rgba(236,102,125,1)',
          //       insideColor: '#ffffff',
          //       fontSize: '20'
          //     }
          //   }
          // },
          label: { //To change the text, you may use label.formatter, which can be set to a string or function.
            normal: {
              // formatter: '{c*100}%', 
              formatter(p) {
                return (Number(p.value)) * 10 * 10 + '%'
                // var y_name = p[0].name
                // p.forEach((item, index) => {
                //   if (index === that.origin.length) {
                //     return
                //   }
                //   y_name += `<p>${item.marker}${item.seriesName}：${
                //     item.value === undefined ? "-" : item.value
                //     } ${that.unit} </p>`
                // })
                // return y_name
              },//If it is a string, {a} series name, {b} data name,{c} data value.
              textStyle: {
                color: that.bg_color(that.ecdata)[0],
                insideColor: '#ffffff',
                fontSize: '20'
              },
              position: ['50%', '50%'], //Text position is at the center by default. label.position can be set to be 'inside', 'left', 'right', 'top', 'bottom', or horizontal and vertical positions like ['10%', '20%'], which means '10%' to the left (controlled by label.align, which can be 'left', 'center', or 'right') and '20%' to the top (controlled by label.baseline, which can be 'top', 'middle', or 'bottom').
              // position:'top'
              // align: 'center',
              // baseline: 'center'
            },
          },
          // 内图 背景色 边
          backgroundStyle: {
            color: 'transparent',
            borderWidth: 7,
            borderColor: '#EEEEEE',
          }
        }],
      }
      return opt
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, true)
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.bg_color(20)
  },
  methods: {
    bg_color(val) {
      if (val > 0 && val <= 20) {
        return ['rgba(236,102,125,1)', 'rgba(236,102,125,0.6)', 'rgba(236,102,125,0.3)']
      }
      if (val > 20 && val <= 40) {
        return ['rgba(234,166,118,1)', 'rgba(234,166,118,0.6)', 'rgba(234,166,118,0.3)']
      }
      if (val > 40 && val <= 60) {
        return ['rgba(252,212,80,1)', 'rgba(252,212,80,0.6)', 'rgba(252,212,80,0.3)']

      }
      if (val > 60 && val <= 80) {
        return ['rgba(89,203,116,1)', 'rgba(89,203,116,0.6)', 'rgba(89,203,116,0.3)']

      }
      if (val > 0 && val <= 100) {
        return ['rgba(7,128,237,1)', 'rgba(7,128,237,0.6)', 'rgba(7,128,237,0.3)']

      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
    },
  }
}
</script>
